<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="adm-panel">
			<div class="adm-panel-hd">
				<div class="index-hd">
					<router-link to="/">
						<i class="iconfont icon-home"></i>
					</router-link>
				</div>
				<el-tabs v-model="editableTabsValue" type="card" closable>
					<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="adm-panel-body ">
				<el-row :gutter="20">
					<el-col :span="12">
						<div class="fv-panel">
							<div class="fv-form flex-center">
								<div class="ui-cell__bd">
									<el-input v-model="fvinput" size="medium" placeholder="请输入内容"></el-input>
								</div>
								<div class="fv-btn">
									<i class="el-icon-search"></i>
								</div>
								<el-dropdown>
									<div class="fv-btn">
										<i class="el-icon-arrow-down "></i>
									</div>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item>下拉</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>
						<div class="fv-panel scroll ht5">
							<ul class="mg-cells">
								<li>
									<div class="mg-card">
										<div class="mg-heading flex-between">
											<div class="mg-title">提醒类型</div>
											<el-tag type="warning">未回复</el-tag>
										</div>
										<div class="mg-body flex-between">
											<div class="mg-title">请依法对案件10201220作出处理</div>
											<div class="mg-time">2020年12月20日</div>
										</div>
									</div>
								</li>
								<li>
									<div class="mg-card">
										<div class="mg-heading flex-between">
											<div class="mg-title">案件办理期限提醒</div>
											<el-tag>已回复</el-tag>
										</div>
										<div class="mg-body flex-between">
											<div class="mg-title">请依法对案件10201220作出处理</div>
											<div class="mg-time">2020年12月20日</div>
										</div>
									</div>
								</li>
								<li>
									<div class="mg-card">
										<div class="mg-heading flex-between">
											<div class="mg-title">提醒类型</div>
											<el-tag type="warning">未回复</el-tag>
										</div>
										<div class="mg-body flex-between">
											<div class="mg-title">请依法对案件10201220作出处理</div>
											<div class="mg-time">2020年12月20日</div>
										</div>
									</div>
								</li>
								<li>
									<div class="mg-card">
										<div class="mg-heading flex-between">
											<div class="mg-title">案件办理期限提醒</div>
											<el-tag>已回复</el-tag>
										</div>
										
										<div class="mg-body flex-between">
											<div class="mg-title">请依法对案件10201220作出处理</div>
											<div class="mg-time">2020年12月20日</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="fv-panel ">
							<div class="h-panel-hd flex-between">
								<div class="h-tit "><strong>案件办理期限提醒</strong></div>
								<div class="h-icon">
									<i class="iconfont icon-fenxiang"></i>
									<i class="iconfont icon-close"></i>
								</div>
							</div>
							<div class="repl-panel scroll ht4">
								<div class="repl-body">
									<div class="repl-text">请依法对案件10201220作出处理</div>
								</div>
								<div class="repl-foot flex-between">
									<el-tag type="warning">已回复</el-tag>
									<div class="mg-time">2020年12月20日</div>
								</div>
							</div>
							<div class="rep-form flex-center">
								<div class="ui-cell__bd">
									<el-input v-model="repinput" size="medium" placeholder="请输入内容">
										<i slot="prefix" class="el-input__icon iconfont icon-duihua"></i>
									</el-input>
								</div>
								<div class="rep-btn">回复</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				editableTabsValue: '1',
				editableTabs: [{
					title: '卷宗提醒',
					name: '1',
				}],
				tabIndex: 1,
				fvinput:'',
				repinput:'',
				bg:require('../../assets/images/bg.jpg'),
				skin:"skin1"
			}

		},
		methods: {
			getData(data) {
				console.log(data)
				if(data ==1){
					this.bg = require('../../assets/images/bg.jpg')
					this.skin = "skin1"
				}else if(data == 2){
					this.skin = "skin2"
					this.bg = require('../../assets/images/bg3.png')
				}else{
					this.skin = "skin3"
					this.bg = require('../../assets/images/bg2.png')
				}
			}
		}
	}
</script>
